<template>
	<view class="container">
		<view v-if="isFailed" class="community__failed">
			<view class="title">
				<image class="icon" src="@/static/image/community/community-failed.png"></image>
				<text class="containt">认证失败</text>
			</view>
			<text class="tips">{{failedMessage}}</text>
		</view>
		<image v-else class="banner__img" src="@/static/image/community/banner-bg02.png" lazy-load></image>			
		<scroll-view scroll-y class="scroll__containt">
			<view class="content__body">
				<text class="content__body--title">个人资料认证</text>
				<!-- 姓名 -->
				<view class="list__item">
					<text class="title">姓名</text>
					<form-list-item placeholder="请输入真实姓名" :maxlength="15" :isShowArrow="false" v-model="name"></form-list-item>
				</view>
				<!-- 手机号 -->
				<view class="list__item">
					<text class="title">手机号</text>
					<form-list-item placeholder="请输入手机号" type="number" :isShowArrow="false" :disabled="true" v-model="mobile"></form-list-item>
					<text class="msg__tip" v-if="mobileTip">{{mobileTip}}</text>
				</view>
				<!-- 身份证号码(选填) -->
				<view class="list__item">
					<text class="title">身份证号码(选填)</text>
					<form-list-item placeholder="输入真实的身份证号码" :isShowArrow="false" v-model="idCard"></form-list-item>
					<text class="msg__tip" v-if="iCardTip">{{iCardTip}}</text>
				</view>
				<!-- 身份标识 -->
				<view class="list__item">
					<text class="title">身份标识</text>
					<picker mode="selector" @change="identificationPickerChange" :value="identificationIndex" range-key="name" :range="identificationList">
						<form-list-item placeholder="请选择" :disabled="true" v-model="identificationName"></form-list-item>
					</picker>
				</view>
				<view class="list__item">
					<text class="title">认证资料(选填)</text>
					<text class="tips">如购房合同、租赁合同,最多上传3张</text>
					<view class="img__list">
						<view v-for="(item,index) in certificationImageList" :key="index" class="img__list--item">
							<image @tap="delImgHandle(index)" class="img__del" src="@/static/image/login/cancel.png" lazy-load></image>
							<image class="img__item" :src="item" lazy-load></image>
						</view>
						<view v-if="certificationImageList.length < 3" class="img__list--item">
							<image @tap="addImgHandle" class="img__item" src="@/static/image/community/add-btn.png" lazy-load></image>
						</view>
					</view>
				</view>
				<view class="bottom__btn">
					<button @tap="submitHandle" class="bottom__btn--submit" type="primary" :disabled="disabled">提交</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import formListItem from '../components/form-list-item.vue'
	import * as api from "@/http/api"
	import { mapState } from 'vuex'
	export default {
		components: {
			formListItem
		},
		data() {
			return {
				canClick: true,
				isFailed: false,
				name: '',//姓名
				// mobile: '',//手机号
				idCard: '',//身份证号码
				identification: '',//身份标识
				identificationIndex: 0,
				identificationName: '',
				identificationList: [{
					id: '1',
					name: '123'
				},{
					id: '2',
					name: '456'
				}],
				certificationImageList: [],//认证图片列表
				communityCode: '',
				residentialCode: '',
				houseId: '',
				houseInfo: '',
				mobileTip: '',
				iCardTip: '',
				// mobileReg: /^1[3|4|5|7|8][0-9]{9}$/,
				idCardReg: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
			}
		},
		computed: {
			...mapState(['failedMessage','mobile']),
			disabled(){
				return !(this.name && this.mobile && this.identification);
			}
		},
		watch: {
			// mobile: {
			// 	handler(newVal,oldVal){
			// 		const reg = /^1[3|4|5|7|8][0-9]{9}$/;
			// 		if(newVal && !this.mobileReg.test(newVal)){
			// 			this.mobileTip = '请输入正确的手机号';
			// 		}else if(this.mobileReg.test(newVal)){
			// 			this.mobileTip = ''
			// 		}
			// 	}
			// },
			idCard: {
				handler(newVal,oldVal){
					const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
					if(newVal && !this.idCardReg.test(newVal)){
						this.iCardTip = '请输入正确的身份证号';
					}else{
						this.iCardTip = ''
					}
				}
			}
		},
		methods: {
			// 获取身份标识
			getIdentificationList(){
				this.$request({
					url: api.listIdentification
				}).then(res => {
					this.identificationList = res || []
				})
			},
			// 身份标识
			identificationPickerChange(e){
				const index = e.detail.value
				this.identificationIndex = index
				this.identificationName = this.identificationList[index].name
				this.identification = this.identificationList[index].id
			},
			// 删除图片
			delImgHandle(index){
				this.certificationImageList.splice(index,1);
			},
			// 添加图片
			addImgHandle(){
				if(this.certificationImageList.length === 3) return
				uni.chooseImage({
					count: 3,
					sourceType: ['album','camera'],
					success: res => {
						res.tempFilePaths.forEach( item =>{
							this.certificationImageList.push(item)
						})
					}
				})
			},
			// 提交
			submitHandle(){
				if (!this.canClick) return
				this.canClick = false
				const tempFilePaths = []
				const data = {
					communityCode: this.communityCode,
					residentialCode: this.residentialCode,
					residentialName: this.residentialName,
					houseId: this.houseId,
					name: this.name,
					mobile: this.mobile,
					idCard: this.idCard,
					identification: this.identification,
					houseInfo: this.houseInfo
				}
				
				const len = this.certificationImageList.length
				if(len){ // 有图片
					for(let i = 0;i < len;i++){
						uni.uploadFile({
							url: api.upload,
							filePath: this.certificationImageList[i],
							name: `file`,
							success: (res) => {
								const resData = JSON.parse(res.data)
								if(resData.code === 200){
									tempFilePaths.push(resData.data);
									if(i === len - 1 ){
										data.certificationImageList = tempFilePaths;
										console.log(322,data)
										this.communityAuthenth(data)
									}
								}else{
									this.canClick = true
									uni.showToast({
										title: resData.message,
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								this.canClick = true
							}
						})
					}
				}else{ //无图片
					this.communityAuthenth(data)
				}
			},
			communityAuthenth(data){
				this.$request({
					url: api.communityCertification,
					data: data,
					method: 'POST'
				}).then(res=>{
					this.setPersonalCache()
					this.$store.commit('setAuthStatus',res.status)
					// 跳转到审核页面
					uni.navigateTo({
						url: '/pages/community/approving/approving'
					})
					uni.showToast({
						title: '已提交'
					})
				}).catch(err => {
					this.canClick = true
				})
			},
			// 缓存数据
			setPersonalCache(){
				this.$cache.set('personalInfo',{
					name: this.name,
					mobile: this.mobile,
					idCard: this.idCard,
					identification: this.identification,
					identificationName: this.identificationName,
					certificationImageList: this.certificationImageList
				})
			},
		},
		onLoad(options) {
			this.isFailed = options.isFailed ? JSON.parse(options.isFailed) : false
			this.getIdentificationList()
			
			this.communityCode = this.$cache.get("communityObj")?.id
			this.residentialCode = this.$cache.get("residentialObj")?.id 
			this.residentialName = this.$cache.get("residentialObj")?.name
			this.houseId = this.$cache.get("houseInfoObj")?.houseId
			this.houseInfo = this.$cache.get("houseInfoObj")?.houseInfo
			console.log(123,this.communityCode,this.residentialCode,this.houseInfo)
			
			const personalInfo = this.$cache.get("personalInfo")
			this.name = personalInfo?.name
			this.mobile = personalInfo?.mobile
			this.idCard = personalInfo?.idCard
			this.identification = personalInfo?.identification
			this.certificationImageList = personalInfo?.certificationImageList || []
			this.identificationName = personalInfo?.identificationName
			
		},
		onShow(){
			this.canClick = true
		}
	}
</script>

<style lang="scss" scoped>
	@import "./personal.scss";
	.container{
		height: 100vh;
		background-color: $uni-bg-color;
		overflow: hidden;
	}
	.scroll__containt {
		position: relative;
		top: 264rpx;
		width: 100%;
		padding: 50rpx 32rpx;
		height: calc(100vh - 226rpx);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		z-index: 999;
		box-sizing: border-box;
		background-color: $uni-bg-color;
	}
	
	.community__failed {
		position: fixed;
		padding: 40rpx 32rpx 0 32rpx;
		width: 100%;
		height: 340rpx;
		background-color: #FFE3E3;
		box-sizing: border-box;
		
		.title {
			display: flex;
			margin-bottom: 18rpx;
			align-items: center;
			
			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
			}
			
			.containt {
				font-size: 36rpx;
				color: #E84335;	
			}
			
		}
		
		.tips {
			display: -webkit-box;
			font-size: $uni-font-size-base;
			color: #E84335;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //需要控制的文本行数
			overflow: hidden;
		}
	}
	.banner__img {
		position: fixed;
		width: 100%;
		height: 340rpx;
	}
	.content__body {
		
		&--title {
			display: flex;
			margin-bottom: 80rpx;
			font-size: 48rpx;
		}
	}
	
	.list__item {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-bottom: 58rpx;
		border-bottom: 1rpx solid $uni-border-color;
		
		.title {
			font-size: $uni-font-size-lg;
		}
		
		.msg__tip {
			position: absolute;
			bottom: -50rpx;
			font-size: $uni-font-size-sm;
			color: red;
		}
	}
	
	.tips {
		display: flex;
		margin-top: 22rpx;
		font-size: $uni-font-size-lg;
		color: #c9c9c9;
	}
	
	.img__list {
		display: flex;
		&--item {
			position: relative;
			margin-top: 32rpx;
			margin-right: 48rpx;
			margin-bottom: 50rpx;
			
			.img__item {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
			
			.img__del {
				position: absolute;
				right: -13rpx;
				top: -13rpx;
				width: 30rpx;
				height: 30rpx;
				z-index: 99;
			}
		}
	}
	
	.bottom__btn {
		padding-bottom: 190rpx;
	}
	
	.bottom__btn--submit {
		width: 480rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
	}
	
	uni-button[disabled][type=primary] {
		background-color: #f7a47d;
	}
	
	uni-button[disabled][type=primary] {
		background-color: #f99464;
	}
	
	uni-button {
		background-color: #FF6C25;
	}
	
	button[type=primary] {
		background-color: #FF6C25;
	}
	
	button[disabled][type=primary] {
		background-color: #f99464;
	}
</style>
